<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="修改个人资料" name="account">
                <account :user="user" />
              </el-tab-pane> 
              <el-tab-pane label="修改登录密码" name="accountPwd">
                <accountPwd />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getToken } from 'utils/auth';
import { mapGetters } from 'vuex'
import { getMyInfo } from '../../api/admin/user/index'
import userCard from './components/userCard'
import accountPwd from './components/accountPwd'
import account from './components/account'
export default {
  name: 'Profile',
  components: { userCard, accountPwd, account },
  data() {
    return {
      user: {},
      activeTab: 'account'
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'name',
      'avatar'
    ])
  },
  created() {
    getMyInfo().then(response => {
      if(response.status === 0){
        this.user = response.data;
      }
      else{
        this.$message.error(response.message);
      }
    });
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        roles: this.roles,
        avatar: this.avatar
      }
    }
  }
}
</script>
